<template>
	<div>
		<div class="demo">
			<p>多选：</p>
			<el-checkbox-group v-model="checkboxGroup1" size="large">
				<el-checkbox-button v-for="city in cities" :key="city" :value="city">
					{{ city }}
				</el-checkbox-button>
			</el-checkbox-group>
		</div>
		<div class="demo">
			<p>单选：</p>
			<div class="wx_radio_button" >
				<input  v-model="picked" type="radio" id="nan" name="sex"  value="1"><label for="nan"><Icon class="wx-nan" size="16"></Icon></label> 
				<input  v-model="picked" type="radio" id="nv" name="sex"  value="0"><label for="nv"><Icon class="wx-nvshangjia" size="16"></Icon></label>
				<span>选中值为: {{ picked }}</span>
			</div>
			<!-- <el-radio-group v-model="radio1" size="large">
				<el-radio-button label="New York" value="New York">
					
					<p>男</p>
				</el-radio-button>
				<el-radio-button label="Washington" value="Washington">
					
					<p>女</p>
				</el-radio-button>
			</el-radio-group> -->
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	const checkboxGroup1 = ref(['Shanghai'])
	const cities:string[] = ['Shanghai', 'Beijing', 'Guangzhou', 'Tianjin']
	const picked=ref()
</script>

<style scoped>
	.demo-button-style {
		margin-top: 24px;
	}
	.demo{
		margin:20px;
		p{
			margin-bottom: 20px;
		}
	}
	.wx_radio_button>input[type='radio']{
		display: none;
	}
	
	.wx_radio_button>input[type='radio']+label { /*  + 选择紧跟在另一个元素后的元素*/
		display: inline-block;
		width: 60px;
		height: 30px;
		border-radius: 4px;
		position: relative;
		background: #eee;
		text-align: center;
		line-height: 30px;
		cursor: pointer;
	}
	
	.wx_radio_button>input[type='radio']:checked+label{
		background:#ecf0ff;
		color:#617af0;
	}
	
	.wx_radio_button>input[type='radio']:checked+label:before {
	    position: absolute;
	    left: -1px;
	    bottom: 9px;
	    -webkit-transform: rotate(-60deg);
	    transform: rotate(-60deg);
	    font-size: 10px;
	}
</style>